<script setup>
defineProps({
  items: {
    type: Array,
    required: true,
  },
  isArrowStaus: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["itemclick"]);
const handleItemClick = (item) => {
  emit("itemclick", item);
};
</script>

<template>
  <div>
    <div class="my-tabbar-container">
      <div
        @click="handleItemClick(item)"
        class="item"
        v-for="item in items"
        :key="item.text"
      >
        <div class="text" :class="{ active: item.active }">{{ item.text }}</div>
        <div class="arrow-container" v-if="item.text === '价格'">
          <van-icon
            name="arrow-up"
            :color="isArrowStaus === 'up' ? '#cea62a' : '#000'"
          />
          <van-icon
            name="arrow-down"
            :color="isArrowStaus === 'down' ? '#cea62a' : '#000'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-tabbar-container {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 18px 0;
  .item {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #212121;
    letter-spacing: 0;
    font-weight: 400;
    .arrow-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      :deep(.van-icon-arrow-up) {
        top: 8px;
      }
      :deep(.van-icon-arrow-down) {
        top: -5px;
      }
    }
  }
  .active {
    color: #cea62a;
  }
}
</style>
